import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/pie/lit-pie.ts"
import {PieProps} from "../../../echarts/pie/lit-pie.ts";

const meta: Meta<PieProps> = {
    title: 'Echarts/LitPie',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PieProps): TemplateResult => {
        return html`<lit-pie 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .title=${args.title}
            .legend=${args.legend}
            .radius=${args.radius}
            .padAngle=${args.padAngle}
            .itemStyle=${args.itemStyle}
            .label=${args.label}
            .emphasis=${args.emphasis}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        title: { control: 'object' },
        legend: { control: 'object' },
        radius: { control: 'text' },
        padAngle: { control: 'number' },
        itemStyle: { control: 'object' },
        label: { control: 'object' },
        emphasis: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<PieProps>;

export const BasicPie: Story = {
    args: {
        chartId: 'basic-pie-chart',
        width: '1200px',
        height: '600px',
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        radius: '50%',
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        },
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
};

export const BorderRadiusPie: Story = {
    args: {
        chartId: 'border-radius-pie-chart',
        width: '1200px',
        height: '600px',
        legend: {
            top: '5%',
            left: 'center'
        },
        radius: ['40%', '70%'],
        itemStyle: {
            borderRadius: 10,
            borderWidth: 2,
            borderColor: '#fff'
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
            }
        },
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
}

export const DoughnutPie: Story = {
    args: {
        chartId: 'doughnut-pie-chart',
        width: '1200px',
        height: '600px',
        legend: {
            top: '5%',
            left: 'center'
        },
        radius: ['40%', '70%'],
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
            }
        },
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
}

export const PadAnglePie: Story = {
    args: {
        chartId: 'pad-angle-pie-chart',
        width: '1200px',
        height: '600px',
        legend: {
            top: '5%',
            left: 'center'
        },
        radius: ['40%', '70%'],
        padAngle: 5,
        itemStyle: {
            borderRadius: 10,
        },
        label: {
            show: false,
            position: 'center'
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
            }
        },
        seriesData: [
            {value: 1048, name: 'Search Engine'},
            {value: 735, name: 'Direct'},
            {value: 580, name: 'Email'},
            {value: 484, name: 'Union Ads'},
            {value: 300, name: 'Video Ads'}
        ]
    }
}